<template>
	<div class="content">
		<!-- 单选多选 -->
		<div v-if="in_array(question.type.value, [1, 2, 10, 11, 12])">
			<div class="title-content">
				<div style="margin-bottom: 5px;">
					<div class="flexV-sb">
						<div class="title" style="flex: 1;">
							<span>{{itemIndex + 1}}. </span>
							<el-tag type="success" size="mini">{{question.type.name}}</el-tag>
							<!-- <el-tag size="mini" v-if="question.difficulty">难度：{{question.difficulty.name}}</el-tag> -->
						</div>
						<div class="options-btns" v-if="isEditModel">
							<el-button size="mini" @click="lookMore" :icon="moreFlag?'el-icon-caret-top':'el-icon-caret-bottom'">展开</el-button>
						</div>
					</div>
				</div>
				<div v-html="question.stem || '暂无标题'" style="font-size: 14px;"></div>
				<div class="image-box" v-if="(moreFlag || !isEditModel) && question.stemFile && question.stemFile.length">
					<template v-for="(item,idex) in question.stemFile" :key="idex">
						<el-image :src="item.url" :preview-src-list="[item.url]" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'image'"></el-image>
						<el-image src="img/video.png" class="cur" @click="videoPlay(item, 1)" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'video'"></el-image>
						<el-image src="img/audio.png" class="cur" @click="videoPlay(item, 2)" style="width: 100px; height: 100px;" fit="cover" v-if="item.type == 'audio'"></el-image>
					</template>
				</div>
				<div v-if="moreFlag || !isEditModel" style="padding: 20px 0;">
					<div :span="24">
						<div v-for="(option, index) in question.option" :key="index" style="display:flex;margin:1em 0;">
							<span class="question-option-tag">{{option.prefix}}</span>
							<div style="flex:1;min-width:0;">
								<div style="flex:1;min-width:0;">{{option.content}}</div>
								<template v-for="(item, bb) in option.file" :key="bb">
									<el-image v-if="item.type == 'image'" :src="item.url" :preview-src-list="[item.url]" fit="cover" style="max-width: 100%; margin-right: 20px;"></el-image>
									<el-image src="img/video.png" class="cur" @click="videoPlay(item, 1)" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'video'"></el-image>
									<el-image src="img/audio.png" class="cur" @click="videoPlay(item, 2)" style="width: 100px; height: 100px;" fit="cover" v-if="item.type == 'audio'"></el-image>
								</template>
							</div>
						</div>
					</div>
				</div>
				<div v-if="(moreFlag || !isEditModel)"  style="border: 1px dashed rgba(67, 113, 215, 0.203043);padding: 0px 20px 12px;background: #ecf5ff;border-radius: 4px;">
					<div :span="24">
						<div class="question-analysis-title">
							正确答案：
						</div>
						<div class="question-analysis-content">
							<b v-for="(item, bb) in question.rightAnswer" :key="bb" class="question-option-tag right">{{item}}</b>
						</div>
						<div class="question-analysis-title" v-if="markMode">
							考生答案：
						</div>
						<div class="question-analysis-content" v-if="markMode">
							<b>{{question.answer || '未作答'}}</b>
						</div>
						<div class="question-analysis-title">
							题目解析：
						</div>
						<div class="question-analysis-content">
							<div v-html="question.analysis || '暂无'"></div>
							<div class="image-box" v-if="(moreFlag || !isEditModel) && question.analysisFile && question.analysisFile.length">
								<template v-for="(item, idex) in question.analysisFile" :key="idex">
									<el-image :src="item.url" :preview-src-list="[item.url]" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'image'"></el-image>
									<el-image src="img/video.png" class="cur" @click="videoPlay(item, 1)" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'video'"></el-image>
									<el-image src="img/audio.png" class="cur" @click="videoPlay(item, 2)" style="width: 100px; height: 100px;" fit="cover" v-if="item.type == 'audio'"></el-image>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 敲击题 -->
		<div v-if="question.type.value == 8">
			<div class="title-content">
				<div style="margin-bottom: 5px;">
					<div class="flexV-sb">
						<div class="title" style="flex: 1;">
							<span>{{itemIndex + 1}}. </span>
							<el-tag type="success" size="mini">{{question.type.name}}</el-tag>
							<el-tag size="mini" >模式：{{question.pattern.value == 4 ? '双鼓' : '单鼓'}}</el-tag>
						</div>
						<div class="options-btns" v-if="isEditModel">
							<el-button size="mini" @click="lookMore" :icon="moreFlag?'el-icon-caret-top':'el-icon-caret-bottom'">展开</el-button>
						</div>
						<!-- <div class="options-btns">
							<el-button size="mini" @click="playStem">{{ playStemFlag ? '暂停播放' : '播放音乐'}}</el-button>
						</div> -->
					</div>
				</div>
				<div v-html="question.stem || '暂无标题'" style="font-size: 14px;"></div>
				<div class="image-box" v-if="(moreFlag || !isEditModel) && question.stemFile && question.stemFile.length">
					<template v-for="(item, idex) in question.stemFile" :key="idex">
						<el-image :src="item.url" :preview-src-list="[item.url]" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'image'"></el-image>
						<el-image src="img/video.png" class="cur" @click="videoPlay(item, 1)" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'video'"></el-image>
						<el-image src="img/audio.png" class="cur" @click="videoPlay(item, 2)" style="width: 100px; height: 100px;" fit="cover" v-if="item.type == 'audio'"></el-image>
					</template>
				</div>
				<div v-if="(moreFlag || !isEditModel)"  style="border: 1px dashed rgba(67, 113, 215, 0.203043);padding: 0px 20px 12px;background: #ecf5ff;border-radius: 4px;">
					<div :span="24">
						<div class="question-analysis-title" style="width: 100%;">
							答案一：{{question.mixedAnswer.first || '暂无'}}
						</div>
						<template v-if="question.mixedAnswer.second">
							<div class="question-analysis-title" style="width: 100%;">
								答案二：{{question.mixedAnswer.second}}
							</div>
						</template>
						<div class="question-analysis-title" v-if="markMode">
							考生答案：
						</div>
						<div class="question-analysis-content" v-if="markMode">
							<b>{{question.answer || '未作答'}}</b>
						</div>
						<div class="question-analysis-title">
							题目解析：
						</div>
						<div class="question-analysis-content">
							<div v-html="question.analysis || '暂无'"></div>
							<div class="image-box" v-if="(moreFlag || !isEditModel) && question.analysisFile && question.analysisFile.length">
								<template v-for="(item,idex) in question.analysisFile" :key="idex">
									<el-image :src="item.url" :preview-src-list="[item.url]" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'image'"></el-image>
									<el-image src="img/video.png" class="cur" @click="videoPlay(item, 1)" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'video'"></el-image>
									<el-image src="img/audio.png" class="cur" @click="videoPlay(item, 2)" style="width: 100px; height: 100px;" fit="cover" v-if="item.type == 'audio'"></el-image>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 拖拽题 -->
		<div v-if="question.type.value == 9">
			<div class="title-content">
				<div style="margin-bottom: 5px;">
					<div class="flexV-sb">
						<div class="title" style="flex: 1;">
							<span>{{itemIndex + 1}}. </span>
							<el-tag type="success" size="mini">{{question.type.name}}</el-tag>
							<el-tag size="mini" >模式：{{question.pattern.value == 2 ? '小节线' : '小节'}}</el-tag>
						</div>
						<div class="options-btns" v-if="isEditModel">
							<el-button size="mini" @click="lookMore" :icon="moreFlag?'el-icon-caret-top':'el-icon-caret-bottom'">展开</el-button>
						</div>
					</div>
				</div>
				<div v-html="question.stem || '暂无标题'" style="font-size: 14px;"></div>
				<div class="image-box" v-if="(moreFlag || !isEditModel) && question.stemFile && question.stemFile.length">
					<template v-for="(item,idex) in question.stemFile" :key="idex">
						<el-image :src="item.url" :preview-src-list="[item.url]" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'image'"></el-image>
						<el-image src="img/video.png" class="cur" @click="videoPlay(item, 1)" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'video'"></el-image>
						<el-image src="img/audio.png" class="cur" @click="videoPlay(item, 2)" style="width: 100px; height: 100px;" fit="cover" v-if="item.type == 'audio'"></el-image>
					</template>
				</div>
				<div v-if="moreFlag || !isEditModel" style="padding: 20px 0;">
					<div :span="24">
						<div v-for="(option, index) in question.option" :key="index" style="display:flex;margin:1em 0;">
							<span class="question-option-tag">{{option.prefix}}</span>
							<div style="flex:1;min-width:0;">
								<template v-if="question.pattern && question.pattern.value == 2">
									<div style="flex:1;min-width:0;">
										<div>Y轴: {{option.content.yAxis}}</div>   
										<div>X轴: {{option.content.xAxis && option.content.xAxis.join("|")}}</div>
									</div>
								</template>
								<template v-else>
									<div style="flex:1;min-width:0;">
										<div>{{option.content.xAxis}},{{option.content.yAxis}}</div>
									</div>
								</template>
								<template v-for="(item, bb) in option.file" :key="bb">
									<el-image v-if="item.type == 'image'" :src="item.url" :preview-src-list="[item.url]" fit="cover" style="max-width: 100%; margin-right: 20px;"></el-image>
									<el-image src="img/video.png" class="cur" @click="videoPlay(item, 1)" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'video'"></el-image>
									<el-image src="img/audio.png" class="cur" @click="videoPlay(item, 2)" style="width: 100px; height: 100px;" fit="cover" v-if="item.type == 'audio'"></el-image>
								</template>
							</div>
						</div>
					</div>
				</div>
				<div v-if="(moreFlag || !isEditModel)" style="border: 1px dashed rgba(67, 113, 215, 0.203043);padding: 0px 20px 12px;background: #ecf5ff;border-radius: 4px;">
					<div :span="24">
						<div class="question-analysis-title">
							正确答案：
						</div>
						<div class="question-analysis-content">
							{{ question.rightAnswer.join("//") }}
						</div>
						<div class="question-analysis-title" v-if="markMode">
							用户答案：
						</div>
						<div class="question-analysis-content" v-if="markMode">
							<b>{{question.answer || '未作答'}}</b>
						</div>
						<div class="question-analysis-title">
							题目解析：
						</div>
						<div class="question-analysis-content">
							<div v-html="question.analysis || '暂无'"></div>
							<div class="image-box" v-if="(moreFlag || !isEditModel) && question.analysisFile && question.analysisFile.length">
								<template v-for="(item,idex) in question.analysisFile" :key="idex">
									<el-image :src="item.url" :preview-src-list="[item.url]" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'image'"></el-image>
									<el-image src="img/video.png" class="cur" @click="videoPlay(item, 1)" style="width: 100px; height: 100px; margin-right: 20px;" fit="cover" v-if="item.type == 'video'"></el-image>
									<el-image src="img/audio.png" class="cur" @click="videoPlay(item, 2)" style="width: 100px; height: 100px;" fit="cover" v-if="item.type == 'audio'"></el-image>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<scDialog :title="audio ? '查看音频' : '查看视频'" v-model="dialogstatus" :width="800" :showFullscreen="false">
        <div style="display: flex; align-items:center;justify-content: center;">
			<video ref="videoControlsBtn" :src="dialogurl" controls style="width: 100%; height: 400px; background:#000;" v-if="!audio"></video>
			<audio ref="audioControlsBtn" :src="dialogurl" controls v-else style="width: 100%;"></audio>
        </div>
        <template #footer>
            <el-button @click="dialogstatus = false">取 消</el-button>
        </template>
    </scDialog>
</template>

<script>
    import { in_array } from '@/utils/index.js'
	export default {
		emits: ['success', 'closed'],
		props: {
			question: {
				type: Object,
				default: () => ({
					type: {
						val: ''
					},
					title: '',
					type_str: '填空题',
					images_show: [
					],
					video_show: '',
					audio_show: '123.mp3',
					options: [
						{prefix: 'A', content: '啊哈哈哈哈', content_img: '123.png'},
						{prefix: 'B', content: '啊哈哈哈哈', content_video: '123.mp4'},
						{prefix: 'C', content: '啊哈哈哈哈', content_audio: '123.mp3'},
						{prefix: 'D', content: '啊哈哈哈哈', content_img: ''},
					],
					answer: '',
					corrects: 'A',
					analysis: '可能是这样的',
					tags: [
						{name: '啊哈'},
						{name: '欧虎'}
					],
                    difficulty: {
                        id: 1,
                        name: "简单"
                    }
				})
			},
			isEditModel: {type: Boolean, default: false}, //是否编辑模式（用于预览题目的时候可以操作展开，删除等操作）
			itemIndex: {type: Number, default: 0}, //当前下标
			length: {type: Number, default: 0}, //该数组长度
			markMode: {type: Boolean, default: false}, //是否批阅模式
			showMode: {type: Boolean, default: false}, //是否查看批阅后的模式
			showRemoveBtn: {type: Boolean, default: true}, //是否显示删除按钮
			showMoveBtn: {type: Boolean, default: true}, //是否显示上移下移按钮
		},
		data() {
			return {
                in_array,
				moreFlag: false,
				playStemFlag: false,
				isMore: '',
				score: 0,
				dialogurl: '',
				dialogstatus: false,
				audio: true,
			}
		},
		mounted() {
		},
		watch:{
			dialogstatus(val){
				if(!val && this.audio === false) {
					this.$refs.videoControlsBtn.pause();
				}
				if(!val && this.audio === true) {
					this.$refs.audioControlsBtn.pause();
				}
			}
		},
		methods: {
			//分数变化
			handleChange(e, id){
				this.$emit('scoreChange', e, id)
			},
			//排序移动
			moveItem(type){
				this.$emit('moveItem', type, this.itemIndex)
			},
			//查看更多
			lookMore(){
				this.moreFlag = !this.moreFlag
			},
			//删除当前题目
			deleteOne(){
				this.$emit('delete', this.itemIndex)
			},
			videoPlay(data, type){
				if(type == 2){
					this.audio = true
				} else {
					this.audio = false
				}
				this.dialogurl = data.url
				this.dialogstatus = true
			},
			playStem(){
				this.playStemFlag = !this.playStemFlag
			},
		}
	}
</script>

<style scoped>
.content-item{background: #f0f9eb;color: #67c23a;border: 1px solid #e1f3d8;border-radius: 4px;margin-right: 5px;margin-bottom: 5px;padding: 0 5px;}
  .title-content {
    line-height: 23px;
    position: relative;
  }

  .title-content .image-box {
    margin-top: 15px;
  }

  .title-content .image-box .el-image {
    width: 80px;
    height: 80px;
  }

  .question-option-tag {
    display: inline-block;
    font-size: 12px;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
	color:#999999;
    background-color: #e6e6e6;
    margin-right: 10px;
  }

  .question-option-tag.wrong {
    background-color: #f56c6c;
    color: #fff;
  }

  .question-option-tag.right {
    background-color: #67C23A;
    color: #fff;
  }

  .question-analysis-title {
    width: 80px;
    margin-top: 10px;
    color: #909399;
  }

  .question-analysis-content {
    /* width: calc(100% - 80px); */
	width: 100%;
    margin-top: 10px;
  }

  .tag-box {
    margin-top: 10px;
  }

  .el-divider {
    margin: 10px 0;
    background-color: #EBEEF5;
  }

  .customer-divider {
    background-color: #DCDFE6;
  }
  pre{
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 微软雅黑;
    line-height: 20px;
  }

</style>
